<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料 - 云书签</title>
    <link rel="stylesheet" href="auth.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="auth-container">
        <div class="auth-card">
            <div class="auth-header">
                <div class="logo">
                    <i class="fas fa-user-circle"></i>
                    <h1>个人资料</h1>
                </div>
                <p class="subtitle">管理你的账户信息</p>
            </div>

            <!-- 个人资料表单 -->
            <div id="profileForm" class="auth-form active">
                <div class="profile-tabs">
                    <button class="tab-btn active" onclick="showTab('info')">
                        <i class="fas fa-user"></i> 基本信息
                    </button>
                    <button class="tab-btn" onclick="showTab('password')">
                        <i class="fas fa-key"></i> 修改密码
                    </button>
                </div>

                <!-- 基本信息标签页 -->
                <div id="infoTab" class="tab-content active">
                    <h2>基本信息</h2>
                    <form id="profileInfoForm">
                        <div class="form-group">
                            <label>用户名</label>
                            <div class="input-wrapper">
                                <i class="fas fa-user"></i>
                                <input type="text" id="username" name="username" placeholder="用户名" required>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>邮箱地址</label>
                            <div class="input-wrapper">
                                <i class="fas fa-envelope"></i>
                                <input type="email" id="email" name="email" placeholder="邮箱地址" required>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>注册时间</label>
                            <div class="input-wrapper readonly">
                                <i class="fas fa-calendar"></i>
                                <input type="text" id="createdAt" readonly>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>最后登录</label>
                            <div class="input-wrapper readonly">
                                <i class="fas fa-clock"></i>
                                <input type="text" id="lastLogin" readonly>
                            </div>
                        </div>
                        
                        <button type="submit" class="auth-btn primary" id="updateInfoBtn">
                            <i class="fas fa-save"></i>
                            保存修改
                        </button>
                    </form>
                </div>

                <!-- 修改密码标签页 -->
                <div id="passwordTab" class="tab-content">
                    <h2>修改密码</h2>
                    <form id="changePasswordForm">
                        <div class="form-group">
                            <label>当前密码</label>
                            <div class="input-wrapper">
                                <i class="fas fa-lock"></i>
                                <input type="password" id="currentPassword" name="current_password" placeholder="请输入当前密码" required>
                                <button type="button" class="toggle-password" onclick="togglePassword('currentPassword')">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>新密码</label>
                            <div class="input-wrapper">
                                <i class="fas fa-lock"></i>
                                <input type="password" id="newPassword" name="new_password" placeholder="请输入新密码" required>
                                <button type="button" class="toggle-password" onclick="togglePassword('newPassword')">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>确认新密码</label>
                            <div class="input-wrapper">
                                <i class="fas fa-lock"></i>
                                <input type="password" id="confirmNewPassword" name="confirm_password" placeholder="请再次输入新密码" required>
                                <button type="button" class="toggle-password" onclick="togglePassword('confirmNewPassword')">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="password-strength" id="newPasswordStrength">
                            <div class="strength-bar">
                                <div class="strength-fill"></div>
                            </div>
                            <span class="strength-text">请输入新密码</span>
                        </div>
                        
                        <button type="submit" class="auth-btn primary" id="changePasswordBtn">
                            <i class="fas fa-key"></i>
                            修改密码
                        </button>
                    </form>
                </div>

                <div class="auth-footer">
                    <a href="index.html" class="back-link">
                        <i class="fas fa-arrow-left"></i> 返回主页
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载指示器 -->
    <div id="loadingOverlay" class="loading-overlay hidden">
        <div class="loading-spinner">
            <i class="fas fa-spinner fa-spin"></i>
            <p>处理中...</p>
        </div>
    </div>

    <!-- 通知容器 -->
    <div id="notificationContainer" class="notification-container"></div>

    <script src="profile.js"></script>
</body>
</html>
